<template>
    <div style="width: 100%; height: 100%" ref="elEcharts"></div>
</template>
<script setup lang="ts">
import { shallowRef, onMounted, watch } from "vue";
import { useEcharts, type EChartsCoreOption } from "@/hooks/useEcharts";

interface Props {
    options: EChartsCoreOption;
}
const props = defineProps<Props>();
const elEcharts = shallowRef();
const currentOptions = shallowRef(props.options);
const { setOptions, initCharts } = useEcharts(elEcharts, currentOptions.value);
import { useThemeStore } from "@/store/modules/themeStore";
const themeStore = useThemeStore();

watch(
    () => props.options,
    (nVal) => {
        let targetOptions: EChartsCoreOption = {};
        targetOptions = { ...nVal };
        setOptions(targetOptions);
    }
);
watch(
    () => themeStore.currentColorArray,
    (nVal) => {
        currentOptions.value.color = nVal;
        setOptions(currentOptions.value);
    }
);
onMounted(() => {
    initCharts();
});
</script>
